<template>
<div>
  <el-breadcrumb
    separator-class="el-icon-arrow-left"
    style="margin-right: 30px;position:absolute;right:0;ub main-center cross-center"
  >
    <el-breadcrumb-item :to="{ path: '/' }">库存量查询</el-breadcrumb-item>
    <el-breadcrumb-item>中心库房</el-breadcrumb-item>

    <el-breadcrumb-item>配送中心</el-breadcrumb-item>
  </el-breadcrumb>

   <!-- 查询信息的表单 -->
  <el-form ref="form" :model="form" label-width="150px">
      <el-input class="input" placeholder="商品名称" v-model="form.name" clearable @clear="chaxun1"></el-input>
      <el-button class="btn1" icon="el-icon-search" type="primary" @click="chaxun">查询</el-button>
  </el-form>
  <!-- 表格 -->
   <el-table
    ref="filterTable"
    :data="form2"
    v-loading="loading"
    style="width: 100%">
       <el-table-column type="index"></el-table-column>
  <el-table-column
      prop="commdityName"
      label="商品名称"
      style="width:25%;">
    </el-table-column>
    <el-table-column
      style="width:25%;"
      prop="currentNumber"
      label="商品当前储量"
      >
    </el-table-column>
    <el-table-column
      prop="warehouseName"
      label="库房名称"
      style="width:25%;">
    </el-table-column>
    <!-- <el-table-column label="操作" style="width:25%;">
      <template slot-scope="scope">
         <el-tooltip effect="dark" content="编辑" placement="top" :enterable="false">
        <el-button
          disabled
          icon="el-icon-edit"
          type="primary"
          size="mini"
          @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button>
         </el-tooltip> 
         <el-tooltip effect="dark" content="删除" placement="top" :enterable="false">
        <el-button
          icon="el-icon-delete"
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, wareset)">删除</el-button>
         </el-tooltip>
      </template>
    </el-table-column> -->
  </el-table>

   <div class="block">
    <el-pagination
      @size-change="handleSizeChange"   
      @current-change="handleCurrentChange" 
      :current-page="pageNum" 
      :page-sizes="[4,5,6,10]"
      :page-size="pageSize" 
      layout="total, sizes, prev, pager, next, jumper" 
      :total="total"> 
</el-pagination>
</div>
</div>
</template>

<script>
export default {
  data() {
    return{
      loading:true,
      pageSize:4,
      pageNum:1,
      total:0,
       queryInfo: {
        query:'',
        type: 3,
        pageNum: 1,
        pageSize: 2,
      },
      form:{
        name:''
      },
      form2:[]
    }
  },
  methods:{
   async chaxun() {
     if(this.form.name == ""){
       return this.$message.error("查询条件不能为空")
     }else{
       this.loading = true
       const {data:res} = await this.$http.get('/api/send/getCurrentNumberVo?pageNum='+this.pageNum+'&pageSize='+this.pageSize,{
       params:{
         'name':this.form.name
       }
     })
     if(res.code == 200) {
       console.log("查询")
       console.log(res)
       let form2 = res.data
       this.total = res.total
       this.form2 = form2
       this.loading = false
       console.log(form2)
     }else{
       return this.$message.error(res.msg)
     }
     }
     
    },
     async chaxun1() {
       this.loading = true
     const {data:res} = await this.$http.get('/api/send/getCurrentNumberVo?pageNum='+this.pageNum+'&pageSize='+this.pageSize)
     if(res.code == 200){
       console.log("查询")
       console.log(res)
       let form2 = res.data
       this.total = res.total
       this.form2 = form2
       console.log(form2)
       this.loading = false
     }else{
       return this.$message.error(res.msg)
     }
    },
     handleEdit(index, rows) {
        this.updateSupplier()
        console.log(index, rows);
      },
      handleDelete(index, rows) {
        console.log(index, rows);
        rows.splice(index,1);
      },
                     /* 设置分页效果下的方法 */
/* 页面大小的改变触发的方法 */
      handleSizeChange(newSize) {
        this.pageSize = newSize
        this.chaxun1()
        
      },
      /* 页面数发送改变的时候 */
      handleCurrentChange(newPage) {
        this.pageNum = newPage
        this.chaxun1()
      
      }
  },
  created () {
    this.chaxun1()
  }
};
</script>

<style scoped>
/* *{
  margin: 0px auto;
  padding: 0px;
} */
.input{
  width: 150px;
  margin-top: 20px;
  margin-left: 10px;
  margin-bottom: 10px;
}
.btn1{
  /* width: 120px; */
  height: 40px;
  margin-left: 10px;
  margin-right: 10px;
  background-color: rgb(32, 178, 170);
}
.btn2{
  text-align: center;
  width: 120px;
  height: 40px;
  margin-left: 150px;
}
.input1{
  margin-top: 10px;
  width: 400px;
}
</style>